<template>

    <div>
        <el-row>
            <template>
                <el-carousel :interval="5000" arrow="always" height="450px">
                    <el-carousel-item v-for="(item,index) in carousels" :key="index">
                        <el-image fit="fit" :src="item.imageUrl" @click="handleImageClick(item)"></el-image>
                    </el-carousel-item>
                </el-carousel>
            </template>
        </el-row>

        <el-row :gutter="10">
            <el-col :span="8">
                <el-card style="height: 400px;" class="fudong">
                    <div @click="toProductInfo(recommendedProducts[0].id)">
                        <div style="display: flex;flex-direction: column;align-content: center;justify-content: center"></div>
                        <div style="flex:1;text-align: center;font-size: 25px;margin: 10px">新品首发</div>
                        <div style="flex:1;text-align: center;font-size: 15px;margin: 10px">每天都有好物上新</div>
                        <div style="flex:1;text-align: center;">
                            <el-image style="width: 270px;height: 250px"
                                      :src="recommendedProducts[0].image"></el-image>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <!--                <div class="grid-content bg-purple"></div>-->
                <el-card style="height: 400px;" class="fudong">
                    <div @click="toProductInfo(recommendedProducts[1].id)">
                        <div style="display: flex;flex-direction: column;align-content: center;justify-content: center"></div>
                        <div style="flex:1;text-align: center;font-size: 25px;margin: 10px">逛好店</div>
                        <div style="flex:1;text-align: center;font-size: 15px;margin: 10px">万家宝藏好店等你来</div>
                        <div style="flex:1;text-align: center">
                            <el-image style="width: 270px;height: 250px" fit="fit"
                                      :src="recommendedProducts[1].image"></el-image>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <!--                <div class="grid-content bg-purple"></div>-->
                <el-card style="height: 400px;" class="fudong">
                    <div @click="toProductInfo(recommendedProducts[2].id)">
                        <div style="display: flex;flex-direction: column;align-content: center;justify-content: center"></div>
                        <div style="flex:1;text-align: center;font-size: 25px;margin: 10px">大牌推荐</div>
                        <div style="flex:1;text-align: center;font-size: 15px;margin: 10px">大品牌值得信赖</div>
                        <div style="flex:1;text-align: center">
                            <el-image style="width: 270px;height: 250px" fit="fit"
                                      :src="recommendedProducts[2].image"></el-image>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>


        <el-card>
            <div slot="header" class="clearfix" style="margin-bottom: 5px">
                <span style="font-weight: bold;font-size:25px">超级品牌日</span>
                <span style="font-size:15px;float: right;color: #2d8cf0"
                      @click="getRandomProducts">不喜欢？换一换</span>
            </div>


            <el-row :gutter="20" class="el-row">
                <el-col :span="6" style="margin-bottom: 20px" v-for="(product,index) in randomProducts"
                        :key="index">
                    <el-card style="height: 250px;">
                        <div style="display: flex;flex-direction: row" @click="toProductInfo(product.id)">
                            <div style="flex:1;text-align: center">
                                <el-image style="width: 120px;height: 120px" fit="fit"
                                          :src="product.image"></el-image>
                            </div>
                            <div style="flex:1;flex-direction: column">
                                <div class="my-over-hidden"
                                     style="flex:2;text-align: center;font-size: 15px;width: 150px">{{
                                    product.name
                                    }}
                                </div>
                                <div style="flex:1;text-align: center;font-size: 20px;margin: 10px;color: #ff3e00">
                                    ￥{{
                                    product.price
                                    }}
                                </div>
                                <div class="my-over-hidden"
                                     style="flex:3;text-align: center;font-size: 15px;width: 150px;color: #99a9bf">{{
                                    product.detail
                                    }}
                                </div>

                            </div>

                        </div>
                        <div style="margin-bottom: 1px">
                            <el-divider></el-divider>
                            <el-link style="float: right" type="primary" @click="toProductInfo(product.id)">>查看详情
                            </el-link>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </el-card>

    </div>


</template>

<script>
import {defineComponent} from 'vue'

export default defineComponent({
    name: "Main",
    data() {
        return {
            carousels: [],
            image: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
            // recommendedProducts: [],
            recommendedProducts: [
                {
                    id: 1,
                    name: '华为 HUAWEI P60 Pro',
                    image: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                    detail: '华为 HUAWEI P60 Pro',
                    detail_img: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                    price: '2323',
                },
                {
                    id: 2,
                    name: '华为 HUAWEI P60 Pro',
                    image: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                    detail: '华为 HUAWEI P60 Pro',
                    detail_img: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                    price: '2323',
                },
                {
                    id: 3,
                    name: '华为 HUAWEI P60 Pro',
                    image: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                    detail: '华为 HUAWEI P60 Pro',
                    detail_img: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                    price: '2323',
                },
            ],
            randomProducts: [],
            size: 16,
        }
    },
    mounted() {


        this.loadMainProducts()
        this.carousels = [
            {
                id: 1,
                imageUrl: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/banner-mate60.png',
                linkUrl: 'http://localhost:7000/main',
                title: '路北区',
                detail: '路北区',
            },
            {
                id: 1,
                imageUrl: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/banner-matex5.png',
                linkUrl: 'http://localhost:7000/main',
                title: '路北区',
                detail: '路北区',
            },
            {
                id: 1,
                imageUrl: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/banner-p60-pro-white.png',
                linkUrl: 'http://localhost:7000/main',
                title: '路北区',
                detail: '路北区',
            },
        ];
        this.loadCarousels()

    },
    methods: {
        // 加载轮播图
        loadCarousels() {
            this.$request.get('/carousel/latest').then(res => {
                if (res.code === '200') {
                    this.carousels = res.data
                    console.log(this.carousels)
                }
            })
        },


        // 加载首页需要展示的商品信息
        loadMainProducts() {
            this.$request.get('/product/mainProducts').then(res => {
                if (res.code === '200') {
                    this.recommendedProducts = res.data.recommendedProducts
                    this.randomProducts = res.data.randomProducts
                    console.log(this.randomProducts)
                } else {
                    this.recommendedProducts = [
                        {
                            id: 1,
                            name: '华为 HUAWEI P60 Pro',
                            image: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                            detail: '华为 HUAWEI P60 Pro',
                            detail_img: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                            price: '2323',
                        },
                        {
                            id: 2,
                            name: '华为 HUAWEI P60 Pro',
                            image: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                            detail: '华为 HUAWEI P60 Pro',
                            detail_img: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                            price: '2323',
                        },
                        {
                            id: 3,
                            name: '华为 HUAWEI P60 Pro',
                            image: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                            detail: '华为 HUAWEI P60 Pro',
                            detail_img: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                            price: '2323',
                        },
                    ]
                    this.randomProducts = [
                        {
                            id: 1,
                            name: '华为 HUAWEI P60 Pro',
                            image: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                            detail: '华为 HUAWEI P60 Pro',
                            detail_img: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                            price: '2323',
                        }, {
                            id: 1,
                            name: '华为 HUAWEI P60 Pro',
                            image: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                            detail: '华为 HUAWEI P60 Pro',
                            detail_img: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                            price: '2323',
                        },
                        {
                            id: 2,
                            name: '华为 HUAWEI P60 Pro',
                            image: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                            detail: '华为 HUAWEI P60 Pro',
                            detail_img: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                            price: '2323',
                        },
                        {
                            id: 3,
                            name: '华为 HUAWEI P60 Pro',
                            image: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                            detail: '华为 HUAWEI P60 Pro',
                            detail_img: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                            price: '2323',
                        },
                        {
                            id: 1,
                            name: '华为 HUAWEI P60 Pro',
                            image: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                            detail: '华为 HUAWEI P60 Pro',
                            detail_img: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                            price: '2323',
                        },
                        {
                            id: 2,
                            name: '华为 HUAWEI P60 Pro',
                            image: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                            detail: '华为 HUAWEI P60 Pro',
                            detail_img: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                            price: '2323',
                        },
                        {
                            id: 3,
                            name: '华为 HUAWEI P60 Pro',
                            image: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                            detail: '华为 HUAWEI P60 Pro',
                            detail_img: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                            price: '2323',
                        }, {
                            id: 1,
                            name: '华为 HUAWEI P60 Pro',
                            image: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                            detail: '华为 HUAWEI P60 Pro',
                            detail_img: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                            price: '2323',
                        },
                        {
                            id: 2,
                            name: '华为 HUAWEI P60 Pro',
                            image: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                            detail: '华为 HUAWEI P60 Pro',
                            detail_img: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                            price: '2323',
                        },
                        {
                            id: 3,
                            name: '华为 HUAWEI P60 Pro',
                            image: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                            detail: '华为 HUAWEI P60 Pro',
                            detail_img: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                            price: '2323',
                        }, {
                            id: 1,
                            name: '华为 HUAWEI P60 Pro',
                            image: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                            detail: '华为 HUAWEI P60 Pro',
                            detail_img: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                            price: '2323',
                        },
                        {
                            id: 2,
                            name: '华为 HUAWEI P60 Pro',
                            image: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                            detail: '华为 HUAWEI P60 Pro',
                            detail_img: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                            price: '2323',
                        },
                        {
                            id: 3,
                            name: '华为 HUAWEI P60 Pro',
                            image: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                            detail: '华为 HUAWEI P60 Pro',
                            detail_img: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                            price: '2323',
                        }, {
                            id: 1,
                            name: '华为 HUAWEI P60 Pro',
                            image: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                            detail: '华为 HUAWEI P60 Pro',
                            detail_img: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                            price: '2323',
                        },
                        {
                            id: 2,
                            name: '华为 HUAWEI P60 Pro',
                            image: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                            detail: '华为 HUAWEI P60 Pro',
                            detail_img: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                            price: '2323',
                        },
                        {
                            id: 3,
                            name: '华为 HUAWEI P60 Pro',
                            image: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                            detail: '华为 HUAWEI P60 Pro',
                            detail_img: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                            price: '2323',
                        },
                    ]
                }
                // console.log(res)
            })
        },

        // 获取随即商品
        getRandomProducts() {
            this.$request.get('/product/getRandomProducts' + '?size=' + this.size).then(res => {
                if (res.code === '200') {
                    this.randomProducts = res.data
                } else {
                    this.$message.error(res.msg)
                }
            })

        },

        handleImageClick(item) {
            window.open(item.linkUrl)
        },
        toProductInfo(id) {
            this.$router.push('/productInfo?id=' + id)
        },
    }
})
</script>


<style>
.el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}


.el-row {
    margin-bottom: 20px;

    &:last-child {
        margin-bottom: 0;
    }
}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: #99a9bf;
}

.bg-purple {
    background: #d3dce6;
}

.bg-purple-light {
    background: #e5e9f2;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}

.my-over-hidden {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
</style>